<template>
	<view class="content">
		<view class="user_info_wrap">
			<!-- <view class="picture_wrap">
				<u-avatar
					src="https://img.js.design/assets/img/652c0fa1204f674f6e1f314a.jpg#f121575e8f6bad0f228ad34dbda3ae73"
					size="100rpx"></u-avatar>
			</view> -->
			<view class="text_wrap">
				<view class="name">{{userInfo.name}}</view>
				<view class="address">{{userInfo.real_name}}</view>
			</view>
		</view>
		<view class="business_info_wrap">
			<view class="box">
				<view class="wenzi">累计下单量</view>
				<view class="wenzi2">
					<view class="tupian">
						<u--image src="../../static/home/home3.png" width="38rpx" height="42rpx"></u--image>
					</view>
					<view class="number">{{userInfo.order_count}}</view>
				</view>
			</view>
			<view class="box">
				<view class="wenzi">累计下单种类</view>
				<view class="wenzi2">
					<view class="tupian">
						<u--image src="../../static/home/home4.png" width="38rpx" height="42rpx"></u--image>
					</view>
					<view class="number">{{userInfo.order_type_count}}</view>
				</view>
			</view>
		</view>
		<view class="tuichu" @tap="onexit">
			<view class="tupian">
				<u--image src="../../static/home/home5.png" width="30rpx" height="30rpx"></u--image>
			</view>
			<text class="wenzi">退出登录</text>
		</view>
	</view>
</template>

<script>
	import {
		myList
	} from "@/api/home.js"
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		created() {
			this.changeNav()
		},
		methods: {
			changeNav() {
				myList().then(res => {
					this.userInfo = res.data
				})

			},
			onexit() {
				//退出登录
				uni.showModal({
					content: '确认要退出登录吗?',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							// uni.clearStorageSync()
							uni.showToast({
								title: '退出成功',
								icon: 'none'
							});
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/index'
								});
							}, 1500);
						}
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		box-sizing: border-box;


		.user_info_wrap {
			width: 100%;
			padding: 60rpx 40rpx;
			height: 260rpx;
			box-sizing: border-box;
			background: rgba(33, 212, 180, 1);
			display: flex;
			justify-content: space-between;

			.picture_wrap {
				width: 108rpx;
				height: 108rpx;
				margin-right: 34rpx;
			}

			.text_wrap {
				width: calc(100% - 124rpx);
				flex-direction: column;

				.name {
					font-size: 32rpx;
					font-weight: 700;
					color: rgba(255, 255, 255, 1);
					margin-bottom: 20rpx;
				}

				.address {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}
		}

		.business_info_wrap {
			width: 100%;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			position: relative;
			top: -60rpx;
			left: 0rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.box {
				display: inline-block;
				width: 340rpx;
				height: 200rpx;
				border-radius: 20rpx;
				background: rgba(245, 242, 242, 1);
				margin-right: 15rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.wenzi {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(37, 38, 38, 1);
					margin-bottom: 20rpx;
				}

				.wenzi2 {
					.tupian {
						display: inline-block;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						background: rgba(3, 185, 209, 0.2);
						padding: 20rpx;
						vertical-align: middle;
						box-sizing: border-box;
					}

					.number {
						display: inline-block;
						font-size: 32rpx;
						font-weight: 700;
						margin-left: 20rpx;
						color: rgba(3, 185, 209, 1);
					}
				}
			}
		}

		.tuichu {
			width: 466rpx;
			height: 80rpx;
			background-color: #fff;
			text-align: center;
			line-height: 80rpx;
			border-radius: 554rpx;
			border: 2rpx solid rgba(99, 99, 99, 1);
			position: fixed;
			bottom: 90rpx;
			left: 150rpx;
			margin: 30rpx 0;

			.tupian {
				position: absolute;
				top: 27rpx;
				left: 138rpx;
			}

			.wenzi {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(109, 108, 112, 1);
			}
		}
	}
</style>